<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--企业数据-->
            <el-col :span="4" :xs="24">
                <div class="head-container">
                    <el-input v-model="deptName" placeholder="请输入名称" clearable size="small" prefix-icon="el-icon-search"
                        style="margin-bottom: 20px" />
                </div>
                <div class="head-containers">
                    <el-tree :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
                        :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all highlight-current
                        @node-click="handleNodeClick" />
                </div>
            </el-col>
            <!--小区数据-->
            <el-col :span="20" :xs="24">
                <el-card class="box-card">
                    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                        label-width="68px">
                        <el-form-item label="客户类型" prop="customerType">
                            <el-select v-model="queryParams.customerType" filterable placeholder="请选择" style="width: 150px">
                                <el-option v-for="dict in dict.type.customer_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="客户名称" prop="customerName">
                            <el-input v-model="queryParams.customerName" placeholder="请输入客户名称" clearable
                                style="width: 150px" />
                        </el-form-item>
                        <el-form-item label="客户编码" prop="customerCode">
                            <el-input v-model="queryParams.customerCode" placeholder="请输入客户编码" clearable
                                style="width: 150px" />
                        </el-form-item>
                        <el-form-item label="业务员" prop="createBy">
                            <el-select v-model="queryParams.createBy" placeholder="请选择业务员" style="width: 150px">
                                <el-option v-for="item in salesmanList" :key="item.userName" :label="item.userName"
                                    :value="item.userName" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="表号" prop="meterCode">
                            <el-input v-model="queryParams.meterCode" placeholder="请输入表号" clearable style="width: 150px" />
                        </el-form-item>
                        <el-form-item label="所属小区" prop="areaId">
                            <treeselect v-model="queryParams.areaId" :options="areaOptions" :show-count="true"
                                placeholder="请选择所属小区" style="width: 150px" />
                        </el-form-item>
                        <el-form-item label="交易时间" prop="openDate">
                            <el-date-picker v-model="queryParams.openDate" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
                                @change="serchTime">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                        </el-form-item>
                    </el-form>
                    <el-card class="box-card">
                        <div class="head_box">
                            <div v-for="(item, index) in headList" :key="index" class="head_box_value">
                                <img :src="item.url" alt="" class="head_box_img">
                                <span>{{ item.name }}：</span>
                                <span>{{ item.value }}</span>
                            </div>
                        </div>
                    </el-card>
                    <el-row :gutter="10" class="mb8" style="margin-top:20px">
                        <el-col :span="1.5">
                            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                                v-hasPermi="['fileManagement:civilArchivesQuery:export']">导出</el-button>
                        </el-col>
                        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
                    </el-row>

                    <el-table v-loading="loading" :data="userList" border>
                        <el-table-column type="selection" width="50" align="center" />

                        <el-table-column label="客户名称" align="center" key="customerName" prop="customerName"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="客户编号" align="center" key="customerCode" prop="customerCode"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="客户类型" align="center" key="customerType" prop="customerType"
                            :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <dict-tag :options="dict.type.customer_type" :value="scope.row.customerType" />
                            </template>
                        </el-table-column>
                        <el-table-column label="业务员" align="center" key="userName" prop="userName"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="表号" align="center" key="meterCode" prop="meterCode"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="片区名称" align="center" key="areaName" prop="areaName"
                            :show-overflow-tooltip="true" />

                        <el-table-column label="客户地址" align="center" key="customerAddress" prop="customerAddress"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="联系电话" align="center" key="telephone" prop="telephone"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="金额（元）" align="center" key="amount" prop="amount"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="交易类型" align="center" key="tradeType" prop="tradeType"
                            :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <span v-if="scope.row.tradeType == '1'">现金支付</span>
                                <span v-if="scope.row.tradeType == '2'">扫码支付</span>
                                <span v-if="scope.row.tradeType == '3'">结余转存</span>
                                <span v-if="scope.row.tradeType == '4'">退费</span>
                                <span v-if="scope.row.tradeType == '5'">冲正</span>
                                <span v-if="scope.row.tradeType == '6'">在线缴费</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="交易时间" align="center" key="payTime" prop="payTime"
                            :show-overflow-tooltip="true" />
                        <el-table-column label="备注" align="center" key="remark" prop="remark"
                            :show-overflow-tooltip="true" />

                    </el-table>

                    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getList" />
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import { reconciliationList, listUser, reconciliationStatistics } from '@/api/report/cost.js'
import { deptTreeSelect } from "@/api/system/user";
import { areaTreeList } from "@/api/fileManagement/areainfo.js"
import Treeselect from '@riophae/vue-treeselect'
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
    name: "ReportCost",
    components: { Treeselect },
    dicts: ["customer_type"],
    data() {
        return {
            // 片区树选项
            areaOptions: undefined,
            salesmanList: [],
            headList: [
                // {
                //     name: '片区',
                //     value: '片区1',
                //     url: require('../../assets/icons/are.png')
                // },
                {
                    name: '现金缴费',
                    value: '0',
                    url: require('../../assets/icons/jiaofie.png')
                },
                {
                    name: '结余转存',
                    value: '0',
                    url: require('../../assets/icons/jieyu.png')
                },
                // {
                //     name: '微信到账金额(元)',
                //     value: '0',
                //     url: require('../../assets/icons/wiexin.png')
                // },
                {
                    name: '扫码支付',
                    value: '0',
                    url: require('../../assets/icons/chongqiang.png')
                },
                {
                    name: '退费金额',
                    value: '0',
                    url: require('../../assets/icons/tuifie.png')
                },
                {
                    name: '冲正金额',
                    value: '0',
                    url: require('../../assets/icons/yingshou.png')
                },
                {
                    name: '在线缴费',
                    value: '0',
                    url: require('../../assets/icons/shishou.png')
                },
                // {
                //     name: '用气量(m3)',
                //     value: '0',
                //     url: require('../../assets/icons/yongqi.png')
                // },
                // {
                //     name: '售气量(m3)',
                //     value: '0',
                //     url: require('../../assets/icons/shouqi.png')
                // },
            ],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 小区表格数据
            userList: null,
            // 弹出层标题
            title: "",
            //表计弹出层标题
            title2: "",
            // 企业树选项
            deptOptions: undefined,
            // 企业名称
            deptName: undefined,
            // 表单参数
            form: {},
            defaultProps: {
                children: "children",
                label: "label",
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userName: undefined,
                phonenumber: undefined,
                status: undefined,
                deptId: undefined,
                startDate: '',
                endDate: '',
            },

            activeName: "1",
            tableData: [],

            value2: "",
            radio: 1,
            value3: "",

        };
    },
    watch: {
        // 根据名称筛选企业树
        deptName(val) {
            this.$refs.tree.filter(val);
        },
    },
    created() {
        this.getStatistics();
        this.getList();
        this.getDeptTree();
        this.getSalesmanList();
        this.getDeptTree1()
    },
    methods: {
        /** 查询企业下拉树结构 */
        getDeptTree1() {
            areaTreeList().then((response) => {
                this.areaOptions = response.data;
            });
        },
        // 获取业务员列表
        getSalesmanList() {
            listUser().then(
                (response) => {
                    this.salesmanList = response.data;
                }
            );
        },
        // 搜索框时间改变
        serchTime(val) {
            console.log(val, 222222)
            this.$set(this.queryParams, 'openDate', val)
            this.$set(this.queryParams, 'startDate', val[0])
            this.$set(this.queryParams, 'endDate', val[1])
        },
        // 获取列表数据
        handleSelectionChange() { },
        getStatistics() {
            //   this.$set(this.queryParams, 'openDate', null)
            let param = JSON.parse(JSON.stringify(this.queryParams))
            delete param.openDate
            reconciliationStatistics(param).then((response) => {
                this.headList.map((res) => {
                    if (res.name == '现金缴费') {
                        res.value = response.data.cashAmount
                    } else if (res.name == '扫码支付') {
                        res.value = response.data.qrcodeAmount
                    } else if (res.name == '结余转存') {
                        res.value = response.data.balanceAmount
                    } else if (res.name == '退费金额') {
                        res.value = response.data.refundAmount
                    } else if (res.name == '冲正金额') {
                        res.value = response.data.reversalAmount
                    } else if (res.name == '在线缴费') {
                        res.value = response.data.onlineAmount
                    }
                })
            });
        },
        /** 查询小区列表 */
        getList() {
            this.loading = true;
            let param = JSON.parse(JSON.stringify(this.queryParams))
            delete param.openDate
            reconciliationList(param).then((response) => {
                this.userList = response.rows;
                this.total = response.total;
                this.loading = false;
                // this.headList.map((res) => {
                //     if (res.name == '现金缴费') {
                //         res.value = response.data.cashAmount
                //     } else if (res.name == '扫码支付') {
                //         res.value = response.data.qrcodeAmount
                //     } else if (res.name == '结余转存') {
                //         res.value = response.data.balanceAmount
                //     } else if (res.name == '退费金额') {
                //         res.value = response.data.refundAmount
                //     } else if (res.name == '冲正金额') {
                //         res.value = response.data.reversalAmount
                //     } else if (res.name == '在线缴费') {
                //         res.value = response.data.onlineAmount
                //     }
                // })

            });
        },

        /** 查询企业下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then((response) => {
                this.deptOptions = response.data;
            });
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.deptId = data.id;
            this.handleQuery();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
            this.getStatistics();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.queryParams.pageNum = 1;
            this.queryParams.pageSize = 10;
            this.$set(this.queryParams, 'startDate', null)
            this.$set(this.queryParams, 'endDate', null)
            this.queryParams.areaId = undefined;
            this.$refs.tree.setCurrentKey(null);
            this.handleQuery();
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download(
                "system/customerarchives/export",
                {
                    ...this.queryParams,
                },
                `user_${new Date().getTime()}.xlsx`
            );
        },
    },
};
</script>
<style lang="scss" scoped>
.head-containers {
    width: 200px;
    overflow: auto;

    .el-tree {
        min-width: 100%;
        display: inline-block !important;
    }
}

.tablex {
    width: 100%;
    border-collapse: collapse;
    border-color: #ebeef5;

    td {
        width: 25%;
        padding: 10px;
        color: #606266;
        font-size: 14px;
    }

    .lables {
        background: rgba(150, 154, 184, 0.05);
        text-align: right;
    }
}

.head_box {
    width: 100%;
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .head_box_value {
        width: 20%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;

        .head_box_img {
            display: inline-block;
            width: 25px;
            height: 25px;
            margin-right: 15px;
        }
    }
}
</style>
